<template>
    <view class="details">
        <SRV-topbar title="我的赠品" isLeft="true"></SRV-topbar>
        <view class="line" v-for="(item,index) in pageResult.list" :key="index">
            <view style="position: relative;">
                <view class="list-box">
                    <view class="list-left"> {{item.title}} </view>
                    <view class="list-right"> {{item.time}} </view>
                </view>
                <view class="list-box">{{item.remark}}</view>
                <view class="list-box" style="justify-content:flex-end;">
                    <view class="btn" v-for="(item2,index2) in item.buttonList" :key="index2"
                        @click="operate(item2.type, item.id)">{{item2.title}}</view>
                </view>
            </view>
        </view>
        <view v-if="pageResult.list.length == 0" class="nocontent">
            <image src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/base.png" mode="widthFix"></image>
            <text>暂无记录～</text>
        </view>
        <uni-popup ref="medal" type="center" animation="ture">
            <view class="medalInfo">
                <view class="popbox">
                    <image @click="close" class="close" src="https://hdsq.aoorange.cn/attachment/xcx/icon/close.png" mode="aspectFill"></image>
                    <view class="title">可领取店铺列表</view>
                    <scroll-view class="scroll" scroll-y="true" show-scrollbar="false">
                        <view class="activityInfo" v-for="(item, index) in merchantList" :key="index">
                            <view class="activityTitle">
                                <view>{{item.title}}</view>
                                <view @click="showMap(item.latitude, item.longitude)">导航</view>
                            </view>
                            <view class="activityRemark">{{item.mobile}}</view>
                            <view class="activityTime">{{item.address}}</view>
                        </view>
                    </scroll-view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
    var _self;
    import serve from '../../static/request.js';
    import storage from '../../static/appkey.js';
    import common from '../../static/jump.js';
    export default {
        data() {
            return {
                merchantList: [],
                pageParam: {
                    appkey: uni.getStorageSync('appkey'),
                    'access-token': uni.getStorageSync('access-token'),
                    type: '',
                    page: 0,
                },
                pageResult: {
                    list: [],
                    isEmpty: false,
                    isEnd: false
                }
            }
        },
        methods: {
            getList() {
                _self.pageParam.page++
                serve.request({
                    url: '/member/gift/list',
                    data: _self.pageParam,
                    v: '/v2'
                }).then(res => {
                    console.log(res.data);
                    if (res.data && res.data.length > 0) {
                        _self.pageResult.list = _self.pageResult.list.concat(res.data);
                    }
                    _self.pageResult.isEmpty = _self.pageResult.list.length == 0;
                    _self.pageResult.isEnd = res.data.length == 0;
                });
            },
            getMerchantList() {
                serve.request({
                    url: '/member/gift/merchant-list',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                    },
                    v: '/v2'
                }).then(res => {
                    _self.merchantList = res.data;
                });
            },
            operate(type, id) {
                if (type == 'merchant') {
                    _self.$refs.medal.open();
                    return;
                } else if (type == 'info') {
                    common.jump('gift_log', id);
                }
            },
            showMap(latitude, longitude) {
                console.info(latitude, longitude);
            	uni.openLocation({
            	    latitude: Number(latitude),
            	    longitude: Number(longitude),
            	    success: function (res) {
            	        console.log(res);
            	    }
            	});
            },
            close() {
                _self.$refs.medal.close();
            },
        },
        onLoad(options) {
            _self = this;
            _self.getList();
            _self.getMerchantList();
        },
        onPullDownRefresh() {
            _self.pageParam.page = 0;
            _self.pageResult.list = [];
            _self.getList();
        },
        onReachBottom() {
            if (_self.pageResult.isEnd || _self.pageResult.isEmpty) {
                return;
            }
            _self.getList()
        }
    }
</script>

<style scoped lang="scss">
    .details {
        width: 100%;

        .line {
            border: 2rpx solid #aaaaaa;
            margin: 20rpx;
        }

        .list-box {
            border-bottom: 2rpx solid #eaeaea;
            display: flex;
            justify-content: space-between;
            align-content: center;
            padding: 30rpx 20rpx;

            image {
                width: 40upx;
                height: 40upx;
                margin-right: 20rpx;
            }
        }

        .btn {
            margin-right: 20rpx;
            padding: 8rpx 20rpx;
            border: 1rpx solid #e69a64;
            border-radius: 20rpx;
            background: #e69a64;
        }

        .btn:first-child {
            border: 1rpx solid #a9a9ec;
            background: #a9a9ec;
        }

        .medalInfo {
            width: 98vw;
            max-height: 90vh;
            min-height: 30vh;
            overflow: hidden;
            z-index: 200;
        }

        .popbox {
            max-height: 900upx;
            padding: 20upx;
            overflow: hidden;
            position: relative;
            border-radius: 20upx;
            background: #fff;
        }

        .close {
            position: absolute;
            width: 30upx;
            height: 30upx;
            right: 50upx;
            top: 50upx;
            z-index: 666;
        }

        .title {
            width: 100%;
            height: 100upx;
            line-height: 100upx;
            font-size: 32upx;
        	   text-align: center;
            border-bottom: 1rpx dashed #ccc;
        }

        .scroll {
            max-height: 500upx;
            margin-top: 20upx;
            font-size: 32upx;
        }

        .activityInfo {
            box-sizing: border-box;
            box-sizing: border-box;
            border: 1upx solid #eee;
            padding: 10upx 20upx;
            margin-bottom: 20upx;
        }
        .activityTitle {
            display: flex;
            justify-content: space-between;
        }

        .nocontent {
            width: 100%;
            padding-top: 338upx;
            display: flex;
            flex-direction: column;
            align-items: center;

            image {
                width: 125upx;
                height: 124upx;
            }

            text {
                font-size: 28upx;
                color: rgba(204, 204, 204, 1);
                margin-top: 30upx;
            }
        }
    }
</style>
